<?php
session_start();
if(!$_SESSION['user']){//用户是否登录已经登录
    header('Location: login.php');
    return;
}
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查询通讯录</title>
    <style>
        a{color: grey; text-decoration: none;cursor: pointer; left: 20px;}
        a:hover{color: red;}
        .status{text-align: right;width:350px;margin: 6px 0;display: flex;}
        .status>p:nth-child(2){color: red;flex-grow: 1;text-align: left;padding-left: 0;}
        h1{ color:red; }
        table{ border:4px double red;}
        td, th{ padding: 5px 20px; border-right: 1px dotted red; border-bottom: 1px dotted red;}
        p{margin: 0;}
        label{margin-right: 2px;}

        html{position: relative;}
        .mask{display:none;position: absolute;top: 0;left: 0;bottom: 0;right: 0;}
        .msgBox{position: absolute;top: 200px;left:80px;min-width: 300px;
            border: 4px double red;border-radius: 10px;background-color: #ddd;
            padding: 10px;
        }
        .msgBox h1{margin: 0;}
        .msgBox .msg{color: blue;margin-bottom: 10px;}
        .msgBox .btn{text-align: right;}
        .msgBox button{padding: 6px 20px;border: 1px solid #999;border-radius: 6px;}
        .msgBox button:hover{border: 1px solid #333;}
    </style>
</head>
<body>
<h1>通讯录信息</h1>
<div class="status">
    <p>欢迎你，</p>
    <p><?=$_SESSION['user']['xh'].$_SESSION['user']['name']?></p>
    <lable><input type="checkbox" checked>删除前需要确认<label>
            <a href="logout.php">注销</a>
</div>
<?php
$db=new PDO("mysql:host=localhost;dbname=db5;",'root', '12qwas');
$db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_ASSOC);
//$ps=$db->query(statement: 'select * from students');
$ps=$db->query('select * from students');
echo "<table>";
echo "<tr><th>学号</th><th>姓名</th><th>电话</th><th>管理</th></tr>";
foreach ($ps as $r){
    echo "<tr data-xh='",urldecode($r['xh']),"')><td>{$r['xh']}</td><td>{$r['name']}</td><td>{$r['tel']}</td><td>";
    if ($r['xh']===$_SESSION['user']['xh'] || $_SESSION['user']['isAdmin']){
        echo "<a>删除</a> <a>修改</a>";
    }
    echo "</td></tr>";
}
echo '</table>'
?>
<script>
    document.querySelector('table').addEventListener('click',async e=>{
        let a=e.target//获取点击的对象
        if(a.tagName!=='A')return//点击的不是超链接，就不再处理
        let tr=a.parentElement.parentElement//获取的是点击的超链接所在的表格行
        let xh=tr.getAttribute('data-xh')//获取要操作对象的学号
        if(a.innerText==='删除'){
            let besure=true//默认要执行删除操作
            if(document.querySelector('input').checked){//需要进行删除确认
                besure=await showDialog('你确定要删除 xh='+xh+'的记录吗?',e,true)
                console.log('besure=',besure)
            }
            if (besure){//真的要删除
                let response=await fetch('delete2.php?xh='+xh)
                let result=await response.json()
                console.log(result)
                if (result.ok){//删除成功
                    if (result.logout) location.href='login.php'
                    else tr.remove()//从界面上移除被删除的记录
                }else{//删除失败
                    // alert(result.msg)
                    await showDialog(result.msg, e, false)
                }
            }
        }else if (a.innerText==='修改'){

        }
    })


    function showDialog(msg, e, showCancel){
        return new Promise((resolve,reject)=>{
            let mask=document.querySelector('.mask')
            mask.style.display='block'
            let table=document.querySelector('table')
            let msgbox=document.querySelector('.msgBox')
            msgbox.querySelector('h1').innerText=showCancel?'确认框':'消息框'
            msgbox.querySelectorAll('button')[1].style.display=showCancel?'':'none'
            msgbox.querySelector('.msg').innerText=msg
            let tableTop=table.offsetTop+table.clientTop
            let tr=e.target.parentElement.parentElement
            tr.style.backgroundColor='yellowgreen'
            let trHeight=tr.offsetHeight
            let top=parseInt((e.pageY-tableTop)/trHeight)*trHeight+tableTop+trHeight
            if(window,innerHeight-(e.clientY+top-e.pageY)<msgbox.offsetHeight){
                top-=msgbox.offsetHeight+trHeight+1
            }
            msgbox.style.top=top+'px'
            msgbox.style.left='80px'
            msgbox.onclick= e=>{
                if (e.target.tagName==='BUTTON'){
                    mask.style.display='none'
                    tr.style.backgroundColor=''
                    resolve(e.target.innerText==='确定')
                }
            }
        })
    }

    // document.querySelectorAll('td>a').forEach(a=>{
    //     a.addEventListener('click', async (e)=>{
    //         let tr=a.parentElement.parentElement
    //         let xh=tr.getAttribute('data-xh')
    //         console.log(a.innerText,xh)
    //         if(a.innerText=='删除'){
    //             console.log('执行删除操作：'+xh)
    //             let besure=true//默认是要进行删除的
    //             if(document.querySelector('input').checked){
    //                 besure=confirm('你确认要删除记录吗？')//让用户确认是否真的要删除
    //             }
    //             if (besure){//真的要删除
    //          let response=await fetch('delete2.php?xh='+xh)
    //          let result=await response.json()
    //          console.log(result)
    //          if (result.ok){//删除成功
    //              if (result.logout) location.href='login.php'
    //              else tr.remove()//从界面上移除被删除的记录
    //          }else{//删除失败
    //              alert(result.msg)
    //          }
    //             }
    //         }else if(a.innerText==='修改'){
    //
    //         }
    //     })
    // })
</script>
<div class="mask">
    <div class="msgBox">
        <h1>确认框</h1>
        <hr>
        <div class="msg">你确认要删除记录吗？</div>
        <div class="btn">
            <button>确定</button>
            <button>取消</button>
        </div>
    </div>
</div>
</body>
</html>